<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.company.ems.dto.PageDTO" %>
<%@ page import="com.company.ems.model.Employee" %>
<%@ page import="java.util.List" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="com.company.ems.model.User" %>
<%
    User loginUser = (User) session.getAttribute("loginUser");
    if (loginUser == null) {
        response.sendRedirect(request.getContextPath() + "/login.jsp");
        return;
    }
    PageDTO<Employee> pageDTO = (PageDTO<Employee>) request.getAttribute("pageDTO");
    List<String> departments = (List<String>) request.getAttribute("departments");
    if (pageDTO == null) {
        pageDTO = new PageDTO<>(null, 1, 5, 0);
    }
    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
%>
<html>
<head>
    <title>员工列表 - 员工信息管理系统</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/style.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
    <style>
        /* 列表页专属样式 */
        .container {
            max-width: 1200px;
            margin: 30px auto;
            padding: 0 20px;
        }

        .header-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24px;
        }

        .search-form {
            background-color: #fff;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            padding: 20px;
            margin-bottom: 24px;
        }

        .form-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 16px;
            margin-bottom: 20px;
        }

        .action-group {
            display: flex;
            gap: 12px;
            justify-content: flex-end;
        }

        .table-actions {
            display: flex;
            gap: 8px;
        }

        .table-action-btn {
            padding: 6px 12px;
            border-radius: var(--radius);
            font-size: 13px;
            transition: var(--transition);
        }

        .badge {
            display: inline-block;
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }

        .badge-primary {
            background-color: rgba(67, 97, 238, 0.1);
            color: var(--primary);
        }
    </style>
    <script>
        // 加载部门对应的职位
        function loadPositions() {
            const dept = document.getElementById("department").value;
            const positionSelect = document.getElementById("position");
            positionSelect.innerHTML = "<option value=''>请选择职位</option>";
            if (!dept) return;

            // 模拟职位数据
            const posMap = {
                "技术部": ["软件工程师", "测试工程师", "运维工程师"],
                "市场部": ["市场专员", "营销经理", "新媒体运营"],
                "人事部": ["HR经理", "招聘专员", "行政专员"]
            };
            (posMap[dept] || []).forEach(pos => {
                const opt = document.createElement("option");
                opt.value = pos;
                opt.text = pos;
                positionSelect.appendChild(opt);
            });
        }
    </script>
</head>
<body>
<!-- 顶部导航 -->
<nav class="top-nav">
    <div class="nav-brand">
        <i class="fa fa-dashboard"></i>
        <span>员工信息管理系统</span>
    </div>
    <div class="nav-user">
        <span>欢迎您，<%= loginUser.getUsername() %>！</span>
        <a href="${pageContext.request.contextPath}/LogoutServlet" class="logout-btn">
            <i class="fa fa-sign-out"></i> 退出登录
        </a>
    </div>
</nav>

<!-- 主体内容 -->
<div class="container">
    <div class="header-actions">
        <h1 class="page-title">
            <i class="fa fa-list"></i> 员工信息列表
        </h1>
        <a href="${pageContext.request.contextPath}/EmployeeServlet?action=add" class="btn btn-primary">
            <i class="fa fa-plus"></i> 新增员工
        </a>
    </div>

    <%-- 提示信息 --%>
    <% if (request.getAttribute("successMsg") != null) { %>
    <div class="alert alert-success">
        <i class="fa fa-check-circle"></i> <%= request.getAttribute("successMsg") %>
    </div>
    <% } %>
    <% if (request.getAttribute("errorMsg") != null) { %>
    <div class="alert alert-danger">
        <i class="fa fa-exclamation-circle"></i> <%= request.getAttribute("errorMsg") %>
    </div>
    <% } %>

    <%-- 查询表单 --%>
    <div class="search-form">
        <form action="${pageContext.request.contextPath}/EmployeeServlet?action=list" method="get">
            <div class="form-grid">
                <div class="form-group">
                    <label class="form-label" for="name">员工姓名</label>
                    <input type="text" id="name" name="name" class="form-control" placeholder="请输入姓名">
                </div>
                <div class="form-group">
                    <label class="form-label" for="department">部门</label>
                    <select id="department" name="department" class="form-control" onchange="loadPositions()">
                        <option value="">请选择部门</option>
                        <% if (departments != null && !departments.isEmpty()) { %>
                        <% for (String dept : departments) { %>
                        <option value="<%= dept %>"><%= dept %></option>
                        <% } %>
                        <% } %>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label" for="position">职位</label>
                    <select id="position" name="position" class="form-control">
                        <option value="">请选择职位</option>
                    </select>
                </div>
                <div class="form-group">
                    <label class="form-label" for="hireDate">入职日期</label>
                    <input type="date" id="hireDate" name="hireDate" class="form-control">
                </div>
            </div>
            <div class="action-group">
                <button type="submit" class="btn btn-primary">
                    <i class="fa fa-search"></i> 查询
                </button>
                <button type="button" class="btn btn-outline" onclick="window.location.href='${pageContext.request.contextPath}/EmployeeServlet?action=list'">
                    <i class="fa fa-refresh"></i> 重置
                </button>
            </div>
        </form>
    </div>

    <%-- 员工表格 --%>
    <table class="table">
        <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>部门</th>
            <th>职位</th>
            <th>薪资</th>
            <th>入职日期</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <% List<Employee> empList = pageDTO.getData();
            if (empList != null && !empList.isEmpty()) {
                for (Employee emp : empList) { %>
        <tr>
            <td><%= emp.getId() %></td>
            <td><%= emp.getName() %></td>
            <td><span class="badge badge-primary"><%= emp.getDepartment() %></span></td>
            <td><%= emp.getPosition() %></td>
            <td>¥<%= String.format("%.2f", emp.getSalary()) %></td>
            <td><%= sdf.format(emp.getHireDate()) %></td>
            <td class="table-actions">
                <a href="${pageContext.request.contextPath}/EmployeeServlet?action=view&id=<%= emp.getId() %>" class="table-action-btn btn-success">
                    <i class="fa fa-eye"></i> 查看
                </a>
                <a href="${pageContext.request.contextPath}/EmployeeServlet?action=edit&id=<%= emp.getId() %>" class="table-action-btn btn-primary">
                    <i class="fa fa-pencil"></i> 编辑
                </a>
                <a href="${pageContext.request.contextPath}/EmployeeServlet?action=delete&id=<%= emp.getId() %>" class="table-action-btn btn-danger" onclick="return confirm('确定删除该员工吗？删除后不可恢复！')">
                    <i class="fa fa-trash"></i> 删除
                </a>
            </td>
        </tr>
        <% } } else { %>
        <tr>
            <td colspan="7" style="text-align: center; padding: 40px; color: var(--gray-700);">
                <i class="fa fa-info-circle"></i> 暂无员工数据，点击"新增员工"添加
            </td>
        </tr>
        <% } %>
        </tbody>
    </table>

    <%-- 分页控件 --%>
    <div class="pagination">
        <% if (pageDTO.getCurrentPage() > 1) { %>
        <li class="page-item">
            <a class="page-link" href="${pageContext.request.contextPath}/EmployeeServlet?action=list&currentPage=1">首页</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="${pageContext.request.contextPath}/EmployeeServlet?action=list&currentPage=<%= pageDTO.getCurrentPage() - 1 %>">上一页</a>
        </li>
        <% } %>

        <% int startPage = Math.max(1, pageDTO.getCurrentPage() - 2);
            int endPage = Math.min(pageDTO.getTotalPage(), pageDTO.getCurrentPage() + 2);
            for (int i = startPage; i <= endPage; i++) { %>
        <li class="page-item <%= i == pageDTO.getCurrentPage() ? "active" : "" %>">
            <a class="page-link" href="${pageContext.request.contextPath}/EmployeeServlet?action=list&currentPage=<%= i %>"><%= i %></a>
        </li>
        <% } %>

        <% if (pageDTO.getCurrentPage() < pageDTO.getTotalPage()) { %>
        <li class="page-item">
            <a class="page-link" href="${pageContext.request.contextPath}/EmployeeServlet?action=list&currentPage=<%= pageDTO.getCurrentPage() + 1 %>">下一页</a>
        </li>
        <li class="page-item">
            <a class="page-link" href="${pageContext.request.contextPath}/EmployeeServlet?action=list&currentPage=<%= pageDTO.getTotalPage() %>">末页</a>
        </li>
        <% } %>
    </div>
</div>

<!-- 页脚 -->
<footer class="app-footer">
    <p>© 2025 员工信息管理系统 | 技术栈：Servlet + JSP + MyBatis</p>
</footer>
</body>
</html>